<template>
	<view class="content">
		<!-- 搜索框+轮播图 -->
		<view class="search">
			<!-- 搜索框 -->
			<view class="search_h">
				<u-search @search="doSearch" @custom="doSearch" bgColor='#E4E7ED' :height=38 :show-action="true"
					:animation="true" :clearabled="true" placeholder="请求输入商品 如: 手机" v-model="keyWord"></u-search>
				<u-toast ref="toast"></u-toast>
			</view>
			<!-- 轮播图 -->
			<view class="u-demo-block">
				<u-swiper @click="toGoodsDetails" :loading=loading height="180px" :list="swiperLists"
					previousMargin="30" nextMargin="30" circular :autoplay="true" radius="10"></u-swiper>
			</view>
		</view>

		<!-- 公告轮播 -->
		<view style="margin-top: 60px;">
			<u-notice-bar bgColor='#fff' speed="80" :text="notice"></u-notice-bar>
		</view>

		<!-- 秒杀专区 -->
		<!-- <view class="navgation_goods">
				<u-cell label="下一场 10:00:00" title="秒杀专区">
					<template #icon>
						<u-icon color='#DC143C' size="30" name="clock-fill"></u-icon>
					</template>
					<template #value>
						<view>
							<text style="font-size: 12px; color: #A9A9A9;">本场结束剩余：</text>
						</view>
						<view>
							<u-count-down :time="30 * 60 * 60 * 1000" format="HH:mm:ss" autoStart millisecond
								@change="onChange">
								<view class="time">
									<view class="time__custom">
										<text
											class="time__custom__item">{{ timeData.hours>10 ? timeData.hours : '0'+timeData.hours}}</text>
									</view>
									<text class="time__doc">:</text>
									<view class="time__custom">
										<text class="time__custom__item">{{ timeData.minutes }}</text>
									</view>
									<text class="time__doc">:</text>
									<view class="time__custom">
										<text class="time__custom__item">{{ timeData.seconds }}</text>
									</view>
								</view>
							</u-count-down>
						</view>
					</template>
				</u-cell>
				<view style="margin-top: 20px;">
					<u-grid @click="onClick" :border="false" col="2">
						<u-grid-item v-for="(listItem,listIndex) in killList" :key="listIndex">
							<image style="width: 100px; height: 100px;" :src="listItem.image"></image>
							<text class="grid-text_goods">{{listItem.title}}</text>
							<view style="display: flex; margin-bottom: 20px; padding-top: 10px;">
								<u-icon class="text" size="18" name="rmb" color="#DC143C"></u-icon><text
									style="color: #DC143C; font-size: 14px;font-weight: bold;">{{listItem.price}}</text>
							</view>
						</u-grid-item>
					</u-grid>
				</view>
			</view> -->

		<!-- 热卖商品 -->
		<view class="navgation_goods">
			<u-cell label="十分火热的商品" title="热卖商品">
				<template #icon>
					<u-icon color='#dd6161' size="30" name="thumb-up-fill"></u-icon>
				</template>
			</u-cell>
			<view style="padding: 5px 10px 10px 10px;">
				<u-skeleton rows="4" :loading="hotGoodsLoading">
					<view v-for="(item,index) in hotGoods" :key="index">
						<view class="card" @click="toDetails(item.id)">
							<view>
								<image style="width: 100px; height: 100px;border-radius: 8px;" :src="item.image">
								</image>
							</view>
							<view style="margin-left: 10px;">
								<text class="grid-text_goods">{{item.goodsName}}</text>
								<view style="padding: 10px 0 10px 0;display: flex;">
									<text style="font-size: 11px;margin-top: 1px; color: #DC143C;">已售：</text><text
										class="text_common">{{item.sale}}</text>
									<u-icon class="icon_common" name="eye" color="#67C23A"></u-icon><text
										class="text_common">{{item.browse}}</text>
									<u-icon class="icon_common" name="star" color="#E6A23C"></u-icon><text
										class="text_common">{{item.collectNum}}</text>
									<u-icon class="icon_common" name="chat" color="#409EFF"></u-icon><text
										class="text_common">{{item.commentNum}}</text>
								</view>
								<view style="display: flex;">
									<u-icon class="text" size="20" name="rmb" color="#DC143C"></u-icon><text
										style="color: #DC143C; font-size: 17px;font-weight: bold;">{{item.price}}</text>
								</view>
							</view>
						</view>
					</view>
				</u-skeleton>
			</view>
		</view>

		<!-- 猜你喜欢 -->
		<view class="navgation_goods">
			<u-cell label="你喜欢的都在这儿" title="猜你喜欢">
				<template #icon>
					<u-icon color='#dd6161' size="30" name="heart-fill"></u-icon>
				</template>
			</u-cell>
			<!-- 展示列表 -->
			<view style="padding: 5px 10px 10px 10px;">
				<u-skeleton rows="4" :loading="recommendLoading">
					<swiper :indicator-dots="true" class="swiper">
						<swiper-item v-for="(listItem,listIndex) in recommendData" :key="listIndex">
							<u-grid :border="false" col="2">
								<u-grid-item @click="toDetails(item.id)" v-for="(item,index) in listItem" :key="index">
									<image style="width: 100px; height: 100px; border-radius: 8px;" :src="item.image">
									</image>
									<text class="text_recommend">{{item.goodsName}}</text>
									<view style="display: flex; margin: 10px 0 15px 0;">
										<u-icon class="text" size="20" name="rmb" color="#DC143C"></u-icon><text
											style="color: #DC143C; font-size: 17px;font-weight: bold;">{{item.price}}</text>
									</view>
								</u-grid-item>
							</u-grid>
						</swiper-item>
					</swiper>
				</u-skeleton>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		findIndexImage,
		findIndexHotGoods,
		findRecommendGoods,
		search
	} from '@/api/goods/index.js';
	import {
		findIndexNotice
	} from '@/api/notice/index.js';
	import {
		onLoad,
		onPullDownRefresh,
		onTabItemTap
	} from '@dcloudio/uni-app';
	import {
		ref
	} from 'vue';

	const allLoading = ref(true);
	onLoad(() => {
		getIndexImages();
		getIndexNotice();
		getIndexHotGoods();
		getIndexRecommendGoods();
		loadNotice();
		loading.value = false;
	});

	//点击底部导航栏时触发
	onTabItemTap(() => {
		getIndexImages();
		getIndexNotice();
		getIndexHotGoods();
		getIndexRecommendGoods();
		loadNotice();
	})

	//下拉刷新请求触发
	onPullDownRefresh(() => {
		getIndexImages();
		getIndexNotice();
		getIndexHotGoods();
		getIndexRecommendGoods();
		loadNotice();
		setTimeout(() => {
			uni.stopPullDownRefresh();
		}, 2000);
	})
	//全局搜索
	const keyWord = ref("");
	const ids = ref([]);
	const toast = ref()
	//搜索
	const doSearch = () => {
		//去除字符串的空白
		let trimKey = uni.$u.trim(keyWord.value, 'all');
		if (trimKey !== '') {
			search(trimKey).then((res) => {
				if (res.code === 200) {
					ids.value = res.data;
					keyWord.value = ""
					uni.navigateTo({
						url: "/pages/search/search?ids=" + ids.value + "&keyword=" + trimKey
					})
				}
			})
		} else {
			toast.value.show({
				type: 'error',
				message: "非法的搜索词！",
			})
		}
	}

	//轮播图数据
	const swiperLists = ref([]);
	const loading = ref(true);
	//轮播图商品Id
	const swiperGoodsId = ref([]);
	//获取轮播图数据
	const getIndexImages = () => {
		findIndexImage().then((res) => {
			if (res.code === 200 && res.data !== null) {
				swiperLists.value = res.data.images;
				swiperGoodsId.value = res.data.ids;
				loading.value = false;
			}
		})
	}

	//首页公告
	const notices = ref([]);
	const notice = ref("");
	const getIndexNotice = () => {
		findIndexNotice().then((res) => {
			if (res.code === 200) {
				notices.value = res.data;
				notice.value = notices.value[0];
			}
		})
	}
	//公告内容轮播
	function loadNotice() {
		let i = 0;
		setInterval(() => { //定时器
			notice.value = notices.value[i++];
			if (i === notices.value.length) {
				i = 0;
			}
		}, 15000)
	};


	//热卖商品数据
	const hotGoodsLoading = ref(true);
	const hotGoods = ref([]);
	const getIndexHotGoods = () => {
		findIndexHotGoods().then((res) => {
			if (res.code === 200) {
				hotGoods.value = res.data;
				hotGoodsLoading.value = false;
			}
		})
	}
	//跳往商品详情页
	const toDetails = (goodsId) => {
		uni.navigateTo({
			url: "/pages/detail/detail?goodsId=" + goodsId
		})
	}

	//从轮播图跳往商品详情页
	const toGoodsDetails = (index) => {
		const goodsId = swiperGoodsId.value[index];
		uni.navigateTo({
			url: "/pages/detail/detail?goodsId=" + goodsId
		})
	}

	//猜你喜欢商品数据
	const recommendLoading = ref(true);
	const recommendData = ref([]);
	//获取猜你喜欢商品数据
	const getIndexRecommendGoods = () => {
		findRecommendGoods().then((res) => {
			if (res.code === 200) {
				recommendData.value = res.data;
				recommendLoading.value = false;
			}
		})
	}
</script>

<style scoped lang="scss">
	.content {
		background-color: #F2F6FC;

		.search {
			height: 200px;
			margin-bottom: 61px;

			.search_h {
				padding: 15px 10px 10px 10px;
				margin-bottom: 5px;
			}
		}
	}

	.icon_common {
		margin-right: 15px;
	}

	.text_common {
		color: #909399;
		font-size: 13px;
		margin-right: 15px;
	}

	.card {
		display: flex;
		margin-top: 15px;
		padding: 5px;
		width: 100%;
		height: 120px;
		background-color: #F5F7FA;
		border-radius: 10px;
		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
	}

	.card:active {
		background-color: #fff;
		opacity: 1;
	}

	.navgation_goods {
		margin-top: 11px;
		background-color: #FFFFFF;
	}

	.grid-text {
		font-size: 14px;
		color: #303133;
		font-weight: 600px;
		padding: 10rpx 0 20rpx 0rpx;
		/* #ifndef APP-PLUS */
		box-sizing: border-box;
		/* #endif */
	}

	.grid-text_goods {
		font-size: 15px;
		color: #303133;
		font-weight: 600;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		text-overflow: ellipsis;
		font-family: "华文楷体";
	}

	.text_recommend {
		margin-top: 10px;
		padding: 0 10px 0 10px;
		font-size: 14px;
		color: #303133;
		font-weight: 600;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		text-overflow: ellipsis;
		font-family: "华文楷体";
	}

	.text {
		font-size: 13px;
		color: #909399;
		/* #ifndef APP-PLUS */
		box-sizing: border-box;
		padding-top: 8px;
		margin-bottom: 20px;
		/* #endif */
	}

	.swiper {
		height: 1250rpx;
	}

	.brand_cl {
		height: 50px;
		padding-top: 10px;
	}

	.box {
		width: 50px;
		height: 50px;
		background-color: #909193;
		border-radius: 15px;
	}

	.icons_cl {
		display: flex;
		margin-left: 10px;
	}

	.icons_right {
		padding-top: 5px;
		margin-left: 120px;
	}

	.icons_rights {
		margin-left: 120px;
	}

	.icons_right_new {
		padding-top: 5px;
		margin-left: 200px;
	}

	.icons_right_Y {
		padding-top: 5px;
		margin-left: 210px;
	}

	.time {
		@include flex;
		align-items: center;

		&__custom {
			margin-top: 4px;
			width: 22px;
			height: 22px;
			background-color: $u-primary;
			border-radius: 4px;
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			justify-content: center;
			align-items: center;

			&__item {
				color: #fff;
				font-size: 12px;
				text-align: center;
			}
		}

		&__doc {
			color: $u-primary;
			padding: 0px 4px;
		}

		&__item {
			color: #606266;
			font-size: 15px;
			margin-right: 4px;
		}
	}
</style>